<template>
<Card>
	<p slot="title">管理商品</p>
	
	<Button @click="handleShowCreateParameterModal(null)">新增购物选项</Button>
	<table class="minitable" text-center long mgt2>
		<tr bg-gray5>
			<td w1>#</td>
			<td text-left>购物选项名称</td>
			<td w6>排序</td>
			<td w6>操作</td>
		</tr>
		<tr v-for="(item, index) in parameters" :key="index">
			<td>{{ index + 1 }}</td>
			<td text-left>{{ item.name }}</td>
			<td>
				<Button type="text" size="small" shape="circle" icon="md-arrow-round-up" :disabled="index==0" @click="handleSortUpParameter(item.id)"></Button>
				<Button type="text" size="small" shape="circle" icon="md-arrow-round-down" :disabled="index==parameters.length-1" @click="handleSortDownParameter(item.id)"></Button>
			</td>
			<td>
				<Button type="primary" size="small" @click="handleShowCreateParameterModal(item)" mgr1>编辑</Button>
				<Button type="error" size="small" @click="handleDeleteParameter(item.id)">删除</Button>
			</td>
		</tr>
	</table>
	
	<Modal v-model="showCreateParameterModal" :title="parameterModel.id?'修改购物选项':'添加购物选项'" :mask-closable="false">
		<Form :ref="parameterFormRef" :model="parameterModel" :label-width="100">
			<!-- <FormItem label="唯一名称" prop="name" required>
				<Input v-model="parameterModel.name" :disabled="!!parameterModel.id" />
			</FormItem> -->
			<FormItem label="名称" prop="name" required>
				<Input v-model="parameterModel.name" />
			</FormItem>
		</Form>
        <div slot="footer">
            <Button type="primary" @click="handleCreateParameter">{{parameterModel.id?'保存':'添加'}}</Button>
            <Button @click="showCreateParameterModal=false">取消</Button>
        </div>
	</Modal>
</Card>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../../lib/abpbase'

@Component
export default class ParameterManager extends AbpBase{
	showCreateParameterModal:Boolean = false;
	parameterFormRef:string = this.getRandomRef('Parameter-form');
	parameters:Array<any> = [];
	parameterModel:any = this.getDefaultParameterModel();
	getDefaultParameterModel() {
		return {
			name: ''
		}
	}
	handleShowCreateParameterModal(item) {
		if(item == null) {
			this.parameterModel = this.getDefaultParameterModel();
		}else {
			this.parameterModel = Object.assign({}, item);
		}
		this.showCreateParameterModal = true;
	}
	handleCreateParameter() {
		this.parameterModel.name = this.parameterModel.name;
		this.validate(this.parameterFormRef, async () => {
			if(!this.parameterModel.id) {
				var response = await this.post('ShoppingOptionParameter/Create', this.parameterModel);
				if(response.success) {
					this.handleGetParameters();
					this.showCreateParameterModal = false;
				}
			}else {
				var response = await this.put('ShoppingOptionParameter/Update', this.parameterModel);
				if(response.success) {
					this.handleGetParameters();
					this.showCreateParameterModal = false;
				}
			}
		});
	}
	handleDeleteParameter(id) {
		this.confirm('确认要删除该购物选项吗？', async () => {
			var response = await this.post('ShoppingOptionParameter/Delete', { id: id });
			if(response.success) {
				this.handleGetParameters();
			}
		});
	}
	async handleSortUpParameter(id) {
		var response = await this.post('ShoppingOptionParameter/SortUp', { id: id });
		if(response.success) {
			this.handleGetParameters();
		}
	}
	async handleSortDownParameter(id) {
		var response = await this.post('ShoppingOptionParameter/SortDown', { id: id });
		if(response.success) {
			this.handleGetParameters();
		}
	}
	async handleGetParameters() {
		var response = await this.get('ShoppingOptionParameter/GetAll');
		if(response.success) {
			this.parameters = response.result;
		}
	}
	async created() {
		await this.handleGetParameters();
	}
}
</script>